<template>
    <div class="addBrand_box">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default" status-icon>
            <el-form-item label="分类名称:" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="上级分类:" prop="level">
                <el-select v-model="ruleForm.level" class="m-2" placeholder="Select" size="small"></el-select>
            </el-form-item>
            <el-form-item label="数量单位:" prop="productUnit">
                <el-input v-model="ruleForm.productUnit" />
            </el-form-item>
            <el-form-item label="排序:" prop="sort
">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <div class="danxuan">
                <el-form-item label="是否显示:" prop="showStatus
">
                    <el-radio-group v-model="ruleForm.showStatus" class="ml-4">
                        <el-radio label="1" size="large">是</el-radio>
                        <el-radio label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div class="danxuan">
                <el-form-item label="是否显示导航栏:" prop="navStatus
">
                    <el-radio-group v-model="ruleForm.navStatus" class="ml-4">
                        <el-radio label="1" size="large">是</el-radio>
                        <el-radio label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <el-form-item label="分类图标:" prop="icon">
                <el-upload v-model:file-list="fileList" class="upload-demo"
                    action="http://120.24.64.5:8088/mall-admin/minio/upload" :on-success="handleSuccess"
                    :on-remove="handleRemove" list-type="picture" :limit="1">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="筛选属性:" prop="productCount">
                <el-select v-model="ruleForm.productCount" class="m-2" placeholder="Select" size="large">
                    <el-option v-for="item in ruleForm" :key="item.id" :label="item.productCount" />
                </el-select>
                <el-button type="primary" plain>删除</el-button>
            </el-form-item>
            <el-button type="primary" class="btn">新增</el-button>

            <el-form-item label="关键词:" prop="keywords">
                <el-input v-model="ruleForm.keywords" />
            </el-form-item>
            <el-form-item label="分类描述:" prop="description">
                <el-input type="textarea" v-model="ruleForm.description" />
            </el-form-item>
            <el-button type="primary" class="btn" @click="btn">提交</el-button>
        </el-form>
    </div>
</template>
<script setup lang='ts'>
import router from "@/router";
import { useRoute } from "vue-router";

import { ref, reactive } from 'vue'
import { BianJiAnNiuApi, TiJiaoAnNiuApi } from "@/http/ums/api";
// @ts-ignore
import { ElMessage, ElMessageBox } from "element-plus"

// const options = ref<any>([])

let initForm = {
    id: 0,
    parentId: 0,
    name: "",
    level: 0,
    productCount: 0,
    productUnit: "",
    navStatus: 0,
    showStatus: 0,
    sort: 0,
    icon: "",
    keywords: "",
    description: ""
}
const ruleForm = reactive<any>({
    ...initForm
})

const route = useRoute()

const currentId = ref<any>(0)

currentId.value = route.query.id


BianJiAnNiuApi(currentId.value).then(res => {
    if (res.code === 200) {
        ruleForm.value = res.data
        console.log(ruleForm.value, 121);
        Object.assign(ruleForm, res.data);
    }
})

const btn = (id: number) => {
    console.log(id);
    ElMessageBox.confirm("确定要提交吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    })
        .then(() => {
            TiJiaoAnNiuApi(ruleForm).then((res) => {
                console.log(res);
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "提交成功",
                    })
                    //  fetch(ruleForm);
                    router.back()
                }
            })
        })
}
</script>
<style lang="less" scoped>
.addBrand_box {
    width: 792px;
    border: 1px solid #ebeef5;
    padding: 65px;
    margin: 0 auto;
    box-sizing: border-box;
}

.danxuan {
    display: flex;
    // justify-content: center;
    align-items: center;
}

.btn {
    margin-left: 150px;
    margin-bottom: 20px;
}
</style>
